<template>
  <div>
    <div class="go-back">
      <el-button type="primary" @click="goback()">返回</el-button>
    </div>
    <el-collapse v-model="activeNames" class="custom-collapse">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="title search-title">
            精准查找&nbsp;&nbsp;
            <i v-if="this.activeNames.length" class="iconfont iconshanglajiantou"></i>
            <i v-else class="iconfont iconxialajiantou"></i>
          </div>
        </template>
        <div class="search">
          <div class="first">
            <div class="input">
              <label>申请ID：</label>
              <el-input v-model.trim="params.apply_id" clearable></el-input>
            </div>
          </div>
          <div class="first">
            <div class="input">
              <label>客户端类型：</label>
              <el-select
                v-model="params.search.app_type"
                placeholder="请选择"
                clearable
                style="width:245px"
              >
                <el-option
                  v-for="item in appList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="input" style="max-width:480px">
            <label style="min-width: 22%;">创建时间：</label>
            <el-date-picker
              v-model="time"
              style="width:500px!important"
              type="datetimerange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </div>
          <div class="btn">
            <el-button type="primary" @click="search()">查找</el-button>
            <el-button @click="resetParams()">重置</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 状态查找 -->
    <div class="status">
      <div class="title">状态查找</div>
      <el-radio-group class="group" v-model="params.open_status" @change="statusChange">
        <el-radio-button
          v-for="item in statusList"
          :key="item.status"
          :label="item.status"
        >{{item.label}}</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 表格主体 -->
    <div class="content">
      <el-table v-loading="loading" :data="list" style="width: 100%" border>
        <el-table-column width="50" label="序号" header-align="center" align="center">
          <template slot-scope="scope">
            <div>{{params.per_limit*(params.page-1)+scope.$index+1}}</div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="id" label="ID" width="60"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="merchant_id"
          label="商户ID"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          show-overflow-tooltip
          prop="sign_name"
          label="签约名"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="merchant_name"
          show-overflow-tooltip
          label="商户简称"
          width="130"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="merchant_no"
          label="商户编号"
          width="220"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="out_merchant_no"
          label="合利宝商户号"
          width="220"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="app_type_name"
          label="客户端类型"
          width="140"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="pay_type_name"
          label="支付类型"
          width="130"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="status_name"
          label="状态"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="fail_reason"
          show-overflow-tooltip
          label="失败原因"
          width="160"
          v-if="params.open_status===2"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="created_at"
          label="创建时间"
          width="auto"
          min-width="140"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="finished_at"
          label="完成时间"
          width="auto"
          min-width="140"
          v-if="params.open_status===1"
        ></el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="params.page"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="params.per_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductList } from '@/api/report-admin/product-list'
import { date, copy } from '@/utils'
// 产品列表
export default {
  data() {
    return {
      activeNames: ['1'],
      list: [],
      time: [],
      loading: false,
      total: 0,
      params: {
        page: 1,
        per_limit: 20,
        open_status: 1,
        apply_id: '',
        search: {
          app_type: '',
          create_time_begin: '',
          create_time_end: ''
        }
      },
      statusList: [
        {
          label: '待报备',
          status: 0
        },
        {
          label: '通过',
          status: 1
        },
        {
          label: '失败',
          status: 2
        }
      ],
      appList: [
        {
          label: '微信',
          value: 1
        },
        {
          label: '支付宝',
          value: 2
        },
        {
          label: '银联',
          value: 3
        }
      ]
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const { id } = vm.$route.query
      vm.params.apply_id = id
      vm.getData()
    })
  },
  beforeRouteLeave(to, from, next) {
    Object.assign(this.$data, this.$options.data())
    next()
  },
  methods: {
    statusChange(value) {
      this.params.apply_status = value
      this.getData()
    },
    resetParams() {
      this.time = []
      let params = {
        page: 1,
        per_limit: 20,
        open_status: 1,
        search: {
          app_type: '',
          create_time_begin: '',
          create_time_end: ''
        }
      }
      Object.assign(this.params, params)
      this.getData()
    },
    search() {
      this.getData()
    },
    getData() {
      this.loading = true
      let params = copy.deepCopy(this.params)
      if (this.time && this.time.length) {
        const [begin, end] = this.time
        params.search.create_time_begin = begin.getTime() / 1000
        params.search.create_time_end = begin.getTime() / 1000
      }
      getProductList(params)
        .then(res => {
          const {
            data,
            meta: {
              pagination: { total }
            }
          } = res
          data.forEach(i => {
            i.finished_at = date.formatDate(i.finished_at)
            i.created_at = date.formatDate(i.created_at)
          })
          this.list = data
          this.total = total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 切换页码
    currentChange(value) {
      this.params.page = value
      this.getData()
    },
    sizeChange(value) {
      this.params.per_limit = value
      this.getData()
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.go-back {
  width: 100%;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  margin: 0 0 15px 0;
}
</style>